<template>
  <div class="container">
    <!-- 标题区域 -->
    <div class="header">
      <div class="title-section">
        <div class="icon-wrapper">
          <i class="fas fa-hands-helping"></i>
        </div>
        <div>
          <h1>咨询师危机个案管理系统</h1>
          <p>当前有12个进行中的个案，其中3个需要紧急关注</p>
        </div>
      </div>
      <div class="button-group">
        <!-- 筛选按钮已注释 -->
        <!-- 新建个案按钮已注释 -->
      </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-section">
      <div class="search-container">
        <div class="search-input-wrapper">
          <i class="fas fa-search"></i>
          <input type="text" placeholder="搜索个案ID、客户姓名..." />
        </div>
        <div class="filter-buttons">
          <span class="filter-button active">
            <i class="fas fa-list"></i>
            全部个案
          </span>
          <span class="filter-button">
            <i class="fas fa-exclamation-triangle"></i>
            高风险
          </span>
          <span class="filter-button">
            <i class="fas fa-spinner"></i>
            进行中
          </span>
          <span class="filter-button">
            <i class="fas fa-check-circle"></i>
            已结案
          </span>
        </div>
      </div>
    </div>

    <!-- 个案卡片网格 -->
    <div class="cards-grid">
      <!-- 高风险个案卡片 -->
      <div class="case-card high-risk">
        <div class="card-header">
          <span class="case-id">CRS-2023-0483</span>
          <span class="status-badge">高风险</span>
        </div>
        <div class="card-body">
          <h3>张明</h3>
          <p class="client-info">32岁，男性，销售经理，首次咨询：2023-07-15</p>

          <div class="info-list">
            <div class="info-item">
              <span class="info-label">项目经理</span>
              <span class="info-value">王静</span>
            </div>
            <div class="info-item">
              <span class="info-label">客户公司</span>
              <span class="info-value">创新科技有限公司</span>
            </div>
            <div class="info-item">
              <span class="info-label">咨询主题</span>
              <span class="info-value">创伤后应激障碍 (PTSD)</span>
            </div>
            <div class="info-item">
              <span class="info-label">紧急联系人</span>
              <span class="info-value">李芳 (配偶) 138****5678</span>
            </div>
          </div>

          <div class="progress-info">
            <span>上次更新: 2023-09-28 14:30</span>
            <span>进度:</span>
          </div>
          <div class="progress-bar">
            <div class="progress-fill"></div>
          </div>
        </div>
        <div class="card-footer">
          <div class="counselor-info">
            <div class="avatar">刘</div>
            <div>
              <p class="counselor-name">刘心怡</p>
              <p class="counselor-title">高级心理咨询师</p>
            </div>
          </div>
          <div class="action-buttons">
            <button class="action-button">
              <i class="fas fa-eye"></i>
            </button>
            <button class="action-button">
              <i class="fas fa-edit"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- 进行中个案卡片 -->
      <div class="case-card in-progress">
        <div class="card-header">
          <span class="case-id">CRS-2023-0512</span>
          <span class="status-badge">进行中</span>
        </div>
        <div class="card-body">
          <h3>李思雨</h3>
          <p class="client-info">
            28岁，女性，产品设计师，首次咨询：2023-08-22
          </p>

          <div class="info-list">
            <div class="info-item">
              <span class="info-label">项目经理</span>
              <span class="info-value">赵伟</span>
            </div>
            <div class="info-item">
              <span class="info-label">客户公司</span>
              <span class="info-value">星云创意设计</span>
            </div>
            <div class="info-item">
              <span class="info-label">咨询主题</span>
              <span class="info-value">职场焦虑与压力管理</span>
            </div>
            <div class="info-item">
              <span class="info-label">紧急联系人</span>
              <span class="info-value">王伟 (同事) 139****8899</span>
            </div>
          </div>

          <div class="progress-info">
            <span>上次更新: 2023-10-02 10:15</span>
            <span>进度:</span>
          </div>
          <div class="progress-bar">
            <div class="progress-fill"></div>
          </div>
        </div>
        <div class="card-footer">
          <div class="counselor-info">
            <div class="avatar">陈</div>
            <div>
              <p class="counselor-name">陈明轩</p>
              <p class="counselor-title">资深心理咨询师</p>
            </div>
          </div>
          <div class="action-buttons">
            <button class="action-button">
              <i class="fas fa-eye"></i>
            </button>
            <button class="action-button">
              <i class="fas fa-edit"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- 新个案卡片 -->
      <div class="case-card new-case">
        <div class="card-header">
          <span class="case-id">CRS-2023-0499</span>
          <span class="status-badge">新个案</span>
        </div>
        <div class="card-body">
          <h3>王建国</h3>
          <p class="client-info">45岁，男性，部门主管，首次咨询：2023-09-18</p>

          <div class="info-list">
            <div class="info-item">
              <span class="info-label">项目经理</span>
              <span class="info-value">孙丽</span>
            </div>
            <div class="info-item">
              <span class="info-label">客户公司</span>
              <span class="info-value">宏达集团</span>
            </div>
            <div class="info-item">
              <span class="info-label">咨询主题</span>
              <span class="info-value">领导力压力与职业倦怠</span>
            </div>
            <div class="info-item">
              <span class="info-label">紧急联系人</span>
              <span class="info-value">张敏 (助理) 136****1122</span>
            </div>
          </div>

          <div class="progress-info">
            <span>上次更新: 2023-10-01 16:40</span>
            <span>进度:</span>
          </div>
          <div class="progress-bar">
            <div class="progress-fill"></div>
          </div>
        </div>
        <div class="card-footer">
          <div class="counselor-info">
            <div class="avatar">黄</div>
            <div>
              <p class="counselor-name">黄雅婷</p>
              <p class="counselor-title">心理咨询师</p>
            </div>
          </div>
          <div class="action-buttons">
            <button class="action-button">
              <i class="fas fa-eye"></i>
            </button>
            <button class="action-button">
              <i class="fas fa-edit"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- 已结案个案卡片 -->
      <div class="case-card closed-case">
        <div class="card-header">
          <span class="case-id">CRS-2023-0356</span>
          <span class="status-badge">已结案</span>
        </div>
        <div class="card-body">
          <h3>陈晓薇</h3>
          <p class="client-info">
            29岁，女性，市场营销专员，首次咨询：2023-05-10
          </p>

          <div class="info-list">
            <div class="info-item">
              <span class="info-label">项目经理</span>
              <span class="info-value">刘涛</span>
            </div>
            <div class="info-item">
              <span class="info-label">客户公司</span>
              <span class="info-value">蓝海数字科技</span>
            </div>
            <div class="info-item">
              <span class="info-label">咨询主题</span>
              <span class="info-value">社交焦虑与团队融入</span>
            </div>
            <div class="info-item">
              <span class="info-label">紧急联系人</span>
              <span class="info-value">陈建国 (父亲) 137****3344</span>
            </div>
          </div>

          <div class="progress-info">
            <span>上次更新: 2023-09-25 11:20</span>
            <span>进度:</span>
          </div>
          <div class="progress-bar">
            <div class="progress-fill"></div>
          </div>
        </div>
        <div class="card-footer">
          <div class="counselor-info">
            <div class="avatar">周</div>
            <div>
              <p class="counselor-name">周文博</p>
              <p class="counselor-title">首席心理咨询师</p>
            </div>
          </div>
          <div class="action-buttons">
            <button class="action-button">
              <i class="fas fa-eye"></i>
            </button>
            <button class="action-button">
              <i class="fas fa-chart-line"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CaseManagement",
  mounted() {
    // 筛选按钮点击效果
    const filterButtons = document.querySelectorAll(".filter-button");
    filterButtons.forEach((button) => {
      button.addEventListener("click", function () {
        // 移除所有按钮的选中状态
        filterButtons.forEach((btn) => {
          btn.classList.remove("active");
        });
        // 添加当前按钮的选中状态
        this.classList.add("active");
      });
    });

    // 卡片悬停效果
    const cards = document.querySelectorAll(".case-card");
    cards.forEach((card) => {
      card.addEventListener("mouseenter", function () {
        this.style.boxShadow =
          "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
        this.style.transform = "translateY(-5px)";
      });
      card.addEventListener("mouseleave", function () {
        this.style.boxShadow =
          "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
        this.style.transform = "translateY(0)";
      });
    });
  },
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

.container {
  font-family: "Noto Sans SC", sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
  line-height: 1.6;
  min-height: 100vh;
  padding: 32px 16px;
}

@media (min-width: 640px) {
  .container {
    padding: 32px 24px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 32px 32px;
  }
}

.container > div {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* 标题区域样式 */
.header {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.title-section {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .title-section {
    margin-bottom: 0;
  }
}

.icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background-color: #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.icon-wrapper i {
  color: #2563eb;
  font-size: 24px;
}

.title-section h1 {
  font-size: 24px;
  font-weight: 700;
  color: #374151;
}

.title-section p {
  color: #6b7280;
  margin-top: 4px;
}

.button-group {
  display: flex;
  gap: 12px;
}

/* 搜索区域样式 */
.search-section {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  margin-bottom: 32px;
}

.search-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .search-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.search-input-wrapper {
  position: relative;
  flex: 1;
  max-width: 448px;
}

.search-input-wrapper i {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #9ca3af;
}

.search-input-wrapper input {
  padding-left: 40px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 80%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
}

.search-input-wrapper input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-button {
  padding: 8px 16px;
  background-color: #f3f4f6;
  color: #374151;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.filter-button.active {
  background-color: #dbeafe;
  color: #1e40af;
}

.filter-button i {
  margin-right: 8px;
}

/* 卡片网格样式 */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 卡片通用样式 */
.case-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.high-risk {
  border-left: 4px solid #ef4444;
}

.in-progress {
  border-left: 4px solid #eab308;
}

.new-case {
  border-left: 4px solid #3b82f6;
}

.closed-case {
  border-left: 4px solid #10b981;
}

.card-header {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.case-id {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
}

.high-risk .status-badge {
  background-color: #fee2e2;
  color: #991b1b;
}

.in-progress .status-badge {
  background-color: #fef3c7;
  color: #92400e;
}

.new-case .status-badge {
  background-color: #dbeafe;
  color: #1e40af;
}

.closed-case .status-badge {
  background-color: #d1fae5;
  color: #065f46;
}

.card-body {
  padding: 20px;
}

.card-body h3 {
  font-size: 20px;
  font-weight: 600;
  color: #374151;
}

.client-info {
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
}

.info-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
}

.info-label {
  font-size: 14px;
  color: #6b7280;
  width: 96px;
  flex-shrink: 0;
}

.info-value {
  font-size: 14px;
  font-weight: 500;
}

.progress-info {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6b7280;
}

.progress-bar {
  height: 8px;
  border-radius: 4px;
  background-color: #e5e7eb;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
}

.high-risk .progress-fill {
  background-color: #ef4444;
  width: 20%;
}

.in-progress .progress-fill {
  background-color: #eab308;
  width: 66%;
}

.new-case .progress-fill {
  background-color: #3b82f6;
  width: 33%;
}

.closed-case .progress-fill {
  background-color: #10b981;
  width: 100%;
}

.card-footer {
  background-color: #f9fafb;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.counselor-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background-color: #2563eb;
  color: white;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.counselor-name {
  font-size: 14px;
  font-weight: 500;
}

.counselor-title {
  font-size: 12px;
  color: #6b7280;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-button {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background-color: white;
  border: 1px solid #d1d5db;
  color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.action-button:hover {
  background-color: #f3f4f6;
}
</style>
